<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小图世界-首页</title>
<link rel="icon" href="../image/pics_2.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../image/pics_2.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="../css/style.css"
	media="screen" />
<link rel="stylesheet" type="text/css" href="../css/index.css"
	media="screen" />
<link rel="stylesheet" type="text/css" href="polaroid/style.css" />
<script type="text/javascript" src="polaroid/jsapi.js"></script>
<script type="text/javascript" src="polaroid/script.js"></script>
<script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
<script src="../js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.timelinr-0.9.4.js"></script>
<script type="text/javascript">
	$(function() {
		$().timelinr()
	});

	function changeBub(index) {
		if (index == 1) {
			$("#tipBub").css("background", "url(../image/tipBub.png)");
			$("#tipBub").css("top", "508px");
			$("#tipBub").css("left", "358px");
		}
		if (index == 2) {
			$("#tipBub").css("background", "url(../image/tipBub2.png)");
			$("#tipBub").css("top", "671px");
			$("#tipBub").css("left", "557px");
		}
		if (index == 3) {
			$("#tipBub").css("background", "url(../image/tipBub3.png)");
			$("#tipBub").css("top", "490px");
			$("#tipBub").css("left", "855px");
		}
		if (index == 4) {
			$("#tipBub").css("background", "url(../image/tipBub4.png)");
			$("#tipBub").css("top", "676px");
			$("#tipBub").css("left", "980px");
		}

	}
</script>
</head>
<body id="main_body">
<div id="logo">
<h1><img src="../image/logo.png" /></h1>
<h2><a href="#">登录</a> | <a href="#">注册</a></h2>
</div>
<div id="menu">
<ul>
	<li class="first"><a href="#" accesskey="1" title="">首 页</a></li>
	<li><a href="#" accesskey="2" title="">微 图</a></li>
	<li><a href="#" accesskey="3" title="">画 影</a></li>
	<li><a href="#" accesskey="4" title="">漫 画</a></li>
	<li><a href="#" accesskey="5" title="">游 戏</a></li>
	<li><a href="#" accesskey="6" title="">空 间</a></li>
</ul>
<div id="search">
<form method="get" action="">
<fieldset><input id="s" type="text" name="s" value="" /> <input
	id="x" type="image" name="imageField" src="../image/img10.jpg" /></fieldset>
</form>
</div>
</div>
<div id="main">
<div id="main_up">
<div id="main_up_left">
<div id=timeline>
<ul id=dates>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#li01">12/09</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1930">12/10</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1944">12/11</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1950">12/12</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1971">12/13</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1977">12/14</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1989">12/15</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#1999">12/16</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#2001">12/17</a></li>
	<li><a
		href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#2011">12/18</a></li>
</ul>
<ul id=issues>
	<li id=li01><img src="../image/index/1.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1930><img src="../image/index/2.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1944><img src="../image/index/3.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1950><img src="../image/index/4.png" />
	<h1>2012--12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1971><img src="../image/index/5.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1977><img src="../image/index/6.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1989><img src="../image/index/7.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=1999><img src="../image/index/8.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=2001><img src="../image/index/9.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
	<li id=2011><img src="../image/index/10.png" />
	<h1>2012-12-09 9:04</h1>
	<p>Donec semper quam scelerisque tortor dictum gravida. In hac
	habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
	diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
	odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
	sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
	eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
	</li>
</ul>
<div id=grad_left></div>
<div id=grad_right></div>
<a id=next
	href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#">+</a>
<a id=prev
	href="http://csslab.cl/ejemplos/timelinr/latest/horizontal.html#">-</a>
</div>

<!-- 相册区 -->
<div style="width: 600px; height: 300px;">
<div class="polaroid ui-draggable" id="polaroid1"><img
	src="../image/cas_pic001.gif" alt="Colloseum" /></div>
<div class="polaroid ui-draggable" id="polaroid2"><img
	src="../image/cas_pic002.gif" alt="Vatican" /></div>
<div class="polaroid ui-draggable" id="polaroid3"><img
	src="../image/cas_pic003.gif" alt="Forum Romanum" /></div>
<div class="polaroid ui-draggable" id="polaroid4"><img
	src="../image/cas_pic004.gif" alt="Fiat 500" /></div>
<div class="polaroid ui-draggable" id="polaroid5"><img
	src="../image/cas_pic005.gif" alt="Me and my girl in Florance" /></div>
<div class="polaroid ui-draggable" id="polaroid6"><img
	src="../image/cas_pic006.gif" alt="Venetian Gondolas" /></div>
<div class="polaroid ui-draggable" id="polaroid7"><img
	src="../image/cas_pic007.gif" alt="Pizza" /></div>
<div class="polaroid ui-draggable" id="polaroid8"><img
	src="../image/cas_pic008.gif" alt="Swimming pool" /></div>
<div class="polaroid ui-draggable" id="polaroid9"><img
	src="../image/cas_pic009.gif" alt="Florence" /></div>
<div class="polaroid ui-draggable" id="polaroid10"><img
	src="../image/cas_pic0010.gif" alt="Tower of Pisa" /></div>
</div>

</div>
<div id="main_up_right">
<div style="margin-top: 10px; font-size: 16px;"><span
	style="border-bottom: 1px solid; padding: 4px; width: 26px; display: inline-block">&nbsp;</span><span
	style="padding: 4px; border-left: 1px solid; border-top: 1px solid; border-right: 1px solid; cursor: pointer;">近期热点</span><span
	style="border-bottom: 1px solid; padding: 4px; width: 5px; display: inline-block">&nbsp;</span><span
	style="padding: 4px; background: #ccc; border-left: 1px solid; border-top: 1px solid; border-right: 1px solid; cursor: pointer;">近期热评</span><span
	style="border-bottom: 1px solid; padding: 4px; width: 128px; display: inline-block">&nbsp;</span>
</div>
<div style="margin-top: 8px;">
<table>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;凶残的高中试题：神开头，神结尾！！！ (78652)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;自从文艺青年、二逼青年出现后，这帮青年都疯了
		(70204)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;他其实没有那么喜欢你（漫画版） (58922)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;几米说：爱情最好不要顺其自然 (51864)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;趣味搞笑视频精选集（三十一） (47886)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;所以说，不要随便在网上公布自己的照片：熊猫篇
		(31552)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;有意思的漫画：长颈鹿但丁经典网络语录（22）
		(31324)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;益智游戏：僵局（Impasse） (31272)</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;如果生活像照片这般美好……（NO.13） (30594)
		</div>
		</td>
	</tr>
	<tr>
		<td>
		<div style="padding: 2px;"><img src="../image/point1.png"
			style="vertical-align: bottom" />&nbsp;作为禽兽，我的压力也很大（7）</div>
		</td>
	</tr>
</table>
</div>

<div
	style="width: 330px; height: 14px; margin-top: 10px; padding: 5px 5px; color: #fff; text-align: left; background: #2C3642; font-weight: bold;">最近的活跃用户</div>
<table style="width: 350px; height: 300px;" cellspacing="0" border="0">
	<tr>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/1.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/2.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/3.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/4.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
	</tr>
	<tr>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/5.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/6.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/7.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/8.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
	</tr>
	<tr>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/9.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/10.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/11.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px; padding-top: 2px;">特立独行的</div>
		</td>
		<td width="82">
		<div
			style="width: 72px; height: 72px; padding: 1px; border: 1px solid #ccc">
		<img src="../image/person/12.jpg" width="72" height="72" /></div>
		<div style="font-size: 12px; padding-top: 2px; padding-top: 2px;">特立独行的</div>
		</td>
	</tr>
</table>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">
<div id="footer1">&nbsp;&nbsp;Copy@Right&nbsp;&nbsp;2012&nbsp;&nbsp;兔兔虎工作室</div>
<div id="footer2"><a href="#">关于我们</a> | <a href="#">隐私政策</a> | <a
	href="#">服务条款</a> |<a href="#"> 联系我们</a>&nbsp;&nbsp;</div>
<div style="clear: both;"></div>
</div>
</body>
</html>